<template>
  <a-drawer
    :title="title"
    width="70%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
      <a-form-model-item label="客户" prop="CustomerId" v-if="showCus">
        <CustRemoteSearchByCondition
          v-model="entity.CustomerId"
          mode="default"
          :is-my-data="false"
          :is-all-data="true"
          @BindCustomer="BindCustomer"
          :disabled="title === '沟通记录查看'"
          placeholder="检索客户(名称/编号)(省市区名称禁止查询)">
        </CustRemoteSearchByCondition>
      </a-form-model-item>
      <a-form-model-item label="日期" prop="DailyRecordDate">
        <a-date-picker v-model="entity.DailyRecordDate" :disabledDate="disabledDate" :disabled="title == '沟通记录查看'"/>
      </a-form-model-item>
      <a-form-model-item label="标题" prop="DailyRecordTitle">
        <a-input v-model="entity.DailyRecordTitle" :disabled="title == '沟通记录查看'"></a-input>
      </a-form-model-item>
      <a-form-model-item label="内容" prop="DailyRecord">
        <wang-editor v-if="title != '沟通记录查看'" v-model="entity.DailyRecord"></wang-editor>
        <p v-else v-html="entity.DailyRecord"></p>
      </a-form-model-item>
      <a-form-model-item label="抄送">
        <a-select
          allowClear
          v-model="selectedUser"
          mode="multiple"
          :filter-option="filterOption"
          style="width: 100%"
          placeholder="请选择授权人员"
          :disabled="title == '沟通记录查看'"
          @deselect="deselect">
          <a-select-option v-for="item in userList" :key="item.Id">
            {{ item.RealName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="关键字">
        <a-select
          mode="tags"
          style="width: 100%"
          :token-separators="[' ', ',']"
          placeholder="请使用【空格或逗号】进行分词"
          v-model="entity.DRKeyWordList"
          :disabled="title === '沟通记录查看'"
          :open="false"
        ></a-select>
      </a-form-model-item>
      <a-form-item label="附件">
        <!--v-model为图片连接地址(可传单个或数组),maxCount为最大上传数:默认为1-->
        <c-upload-file
          v-model="entity.File"
          :maxCount="5"
          :fileUrl="'/CustomerManagement/SalesmanDailyRecord/UploadFileByForm'"
          :disabled="title === '沟通记录查看'"
          :bt="10"
        ></c-upload-file>
      </a-form-item>
    </a-form-model>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 99999
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
      <a-button type="primary" v-if="title != '沟通记录查看'" :loading="btnLoading" @click="handleSubmit">保存
      </a-button
      >
    </div>
  </a-drawer>
</template>

<script>
import OperatorCache from '@/utils/cache/OperatorCache'
import CUploadFile from '@/components/CUploadFile/CUploadFile.vue'
import WangEditor from '@/components/WangEditor/WangEditor.vue'
import CustRemoteSearchByCondition from '@/components/RemoteSearch/CustRemoteSearchByCondition'
import moment from 'moment'

export default {
  components: {
    WangEditor,
    CUploadFile,
    CustRemoteSearchByCondition
  },
  props: {
    parentObj: Object
  },
  data () {
    return {
      data: [],
      layout: {
        labelCol: { span: 2 },
        wrapperCol: { span: 21 }
      },
      visible: false,
      btnLoading: false,
      entity: {},
      rules: {
        DRKeyWordList: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
        CustomerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
        DailyRecordDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
        DailyRecordTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        DailyRecord: [{ required: true, message: '请输入内容', trigger: 'blur' }]
      },
      title: '',
      showCus: true,
      selectedUser: [],
      userList: [],
      searchdata: []
    }
  },
  methods: {
    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    getUserList () {
      this.$http
        .post('/Base_Manage/Base_User/GetDataList', {
          PageIndex: 1,
          PageRows: 999,
          SortField: 'CreateTime',
          SortType: 'desc',
          Search: {}
        })
        .then(resJson => {
          this.loading = false
          this.userList = resJson.Data
        })
    },
    op () {
      return OperatorCache.info
    },
    closeMode (row) {
      this.$set(this.entity, 'CustomerName', row.cCusName)
      this.$set(this.entity, 'CustomerId', row.Id)
    },
    init () {
      this.btnLoading = false
      this.visible = true
      this.selectedUser = []
      this.searchdata = []
      this.entity = {
        File: [],
        DailyRecordDate: moment(new Date())
      }
      this.$set(this.entity, 'DailyRecord', '')
      this.getUserList()
    },
    close () {
      this.visible = false
      this.showCus = true
      this.entity = {}
    },
    openForm (record, title) {
      this.title = title || '沟通记录录入'
      this.init()
      if (record && typeof record === 'object') {
        this.getDataList(record.Id)
      } else if (typeof record === 'string') {
        this.showCus = false
        this.entity.CustomerName = record.split('_')[1]
        this.entity.CustomerId = record.split('_')[0]
      }
    },
    BindCustomer (val) {
      this.$set(this.entity, 'CustomerId', val == null ? null : val.Id)
      this.$set(this.entity, 'CustomerName', val == null ? null : val.cCusName)
    },
    disabledDate (current) {
      return current && current > moment().endOf('day')
    },
    deselect (value, op) {
      console.log(value, this.selectedUser, op)
    },
    getDataList (id) {
      this.$http.post('/CustomerManagement/SalesmanDailyRecord/GetTheData', { id }).then(res => {
        if (res.Success) {
          this.entity = res.Data
          this.entity.DailyRecordDate = moment(this.entity.DailyRecordDate)
          // 附件
          this.entity.SDRDTOList
            ? (this.entity.File = this.entity.SDRDTOList.map(item => item.FileURL))
            : (this.entity.File = [])
          // 关键字

          if (this.entity.DRKeyWordList) {
            this.entity.DRKeyWordList = this.entity.DRKeyWord.split('|')
          } else {
            this.entity.DRKeyWordList = []
          }

          // 分享人
          this.entity.SharerIds ? (this.selectedUser = this.entity.SharerIds.split('|')) : (this.selectedUser = [])
        } else {
          this.$message.error(res.Msg)
        }
      })
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) return
        this.loading = true
        this.entity.SalesmanName = this.op().RealName
        // 附件
        if (this.entity.File.length > 0) {
          this.entity.SDRDTOList = this.entity.File.map(item => {
            return {
              FileURL: item
            }
          })
        } else {
          this.entity.SDRDTOList = []
        }
        // 分享人
        console.log(this.selectedUser)
        if (this.selectedUser.length !== 0) {
          this.entity.SharerIds = this.selectedUser.join('|')
        } else {
          this.entity.SharerIds = null
        }
        this.$http.post('/CustomerManagement/SalesmanDailyRecord/SaveData', this.entity).then(res => {
          this.loading = false
          if (res.Success) {
            this.visible = false
            this.$message.success('操作成功')
            this.parentObj.getDataList()
            setTimeout(() => {
              this.btnLoading = false
            }, 500)
          } else {
            this.$message.error(res.Msg)
          }
        })
      })
    }
  }
}
</script>
